<!--
* description: 试驾车订单审核
* author: wangml
* createdDate: 2020-11-12
-->
<template>
  <div class="app-container app-container-table">
    <!-- 单表格模版页面 -->
    <one-table-template
      ref="multipleTable"
      :dynamic-api-config="dynamicApiConfig"
      :dynamic-buttons="dynamicButtons"
      :dynamic-components="tableComponents"
      :dynamic-table-cols="dynamicTableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-more-btn="true"
      :dynamic-is-show-select="false"
      :dynamic-api-style="apiStyle"
      :dynamic-page-size="10"
      :refresh-table-key="refreshTableKey"
      :callback-obj="callbackObj"
      @hiddenColData="hiddenColData"
    />
    <!--      :dynamic-export-converts="dynamicExportConverts"-->
    <edit
      :dynamic-api-config="{APIUrl: 've/orderadd'}"
      dynamic-api-style="restful"
      :popups-visible.sync="showdia"
      :popups-state="popstate"
      :dynamic-text-map="{edit:'试驾车订单详细',add:'新增订单制作'}"
      :dynamic-edit-row-data="clickRowsData"
      @close="popClose"
    />

  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import edit from './edit'
import Vue from 'vue'
import api from '@/api/testDriver'
// import { log } from 'util'

export default {
  name: 'OrderApproval',
  components: {
    // MixForm,
    OneTableTemplate,
    edit
  },
  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      // 同时加载当前页面和编辑框页面的配置
      [to.path, ''],
      function() {
        next()
      })
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      carInfoList: [],
      clickRowsData: {},
      popstate: 'edit',
      showdia: false,
      // 指定请求类型 可以统一在 utils/config.js中配置
      apiStyle: 'restful',
      dynamicApiConfig: api.orderApproval,
      refreshTableKey: '0',
      ruleSettingShow: false,
      // table表格查询API配置对象
      // 动态组件-查询条件
      tableComponents:
          this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents.length > 0
            ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents
            : [
              {
                compKey: 'compKey1',
                labelName: '试驾车单号:',
                codeField: 'insaleOrderCode',
                component: () => import('@/components/org/commonInput'),
                type: 'inputText',
                isMust: true,
                span: 6
              },
              {
                compKey: 'compKey2',
                labelName: '审核状态:',
                codeField: 'insaleOrderStatus',
                component: () => import('@/components/org/commonSelect'),
                type: 'dropdownList',
                lookuptype: 'VE1125',
                isMust: true,
                span: 6
              },
              {
                compKey: 'compKey3',
                labelName: '交付门店:',
                codeField: 'deliveryDlrId',
                oFields: 'deliveryDlrId,deliveryDlrShortName',
                component: () => import('@/components/org/commonSelect'),
                customObj: {
                  api: { APIUrl: api.QueryCenterByList.APIUrl },
                  listQuery: { cityId: '' }
                },
                type: 'dropdownList',
                isMust: true,
                span: 6
              },
              {
                compKey: 'compKey5',
                labelName: '下单时间：',
                codeField: 'orderStartTime,orderEndTime',
                component: () => import('@/components/org/datePicker/datePicker'),
                dateType: 'daterange',
                isMust: true,
                span: 6
              }
            ],

      // form 的表单对象
      formField: this.$utils.getFormField(this, {
        insaleOrderCode: '',
        insaleOrderStatus: '',
        deliveryDlrId: '',
        // orderDate: ['', '']
        orderStartTime: '',
        orderEndTime: ''
      }, this.$ConfigCache.CacheConfig.cacheData[viewPageCode]),
      // 动态组件-按钮
      dynamicButtons: this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons : [
          {
            compKey: 'btnKey1',
            type: 'primary',
            size: 'small',
            name: 'search',
            clickEvent: () => this.queryTable(1),
            text: '查询'
          },
          {
            compKey: 'btnKey2',
            type: '',
            size: 'small',
            name: 'reset',
            clickEvent: () => {
              this.reset()
            },
            text: '重置'
          }
        ],
      // 动态组件-表格网格列
      dynamicTableCols: this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols : [
          {
            label: '操作',
            minWidth: 180,
            fixed: true,
            isComponent: true,
            comps: [
              {
                compKey: 'propKey1',
                labelName: '明细',
                component: () => import('@/components/org/linkButton'),
                clickEvent: (index) => this.edit(index)
              }
            ]
          },
          {
            prop: 'releaseId',
            label: '主键ID',
            hidden: true,
            alwaysHidden: true
          },
          {
            prop: 'controlId',
            label: '并发控制ID',
            hidden: true,
            alwaysHidden: true
          },
          {
            prop: 'insaleOrderCode',
            label: '试驾车单号'
          },
          {
            prop: 'deliveryDlrShortName',
            label: '交付门店'
          },
          {
            prop: 'insaleOrderStatus',
            label: '审核状态'
          },
          {
            prop: 'orderDate',
            label: '下单时间'
          },
          {
            prop: 'number',
            label: '计划配车数量'
          },
          {
            prop: 'remark',
            label: '备注'
          }
        ],
      // 字段格式化转换（用于导出excel）（kvs表示键值转换）
      // dynamicExportConverts: {
      //   'isForce': {
      //     'convert': 'kvs',
      //     'kvs': {
      //       '1': '是',
      //       '0': '否'
      //     }
      //   }
      // },
      // 单表格模版页面组件回调事件
      callbackObj: {
        // 当选择项发生变化时会触发该事件（多选时）
        onCheckSelectChange: (selection) => {
          this.handleSelectionChange(selection)
        },
        onBeforeQuery: (queryObj) => {
          !queryObj.variables.orderDate ? queryObj.variables.orderDate = ['', ''] : ''
        }
        // onQueryReturn: (resp) => {
        // const rowData = resp.rows
        // this.carInfoList = rowData.map(row => row['carInfo'])
        // }
      }
    }
  },
  mounted() {
    // 列表查询
    this.queryTable(1)
  },
  methods: {
    // 保存 或新增 后会调用此方法
    popClose(type) {
      this.showdia = false
      if (type == 1) {
        this.queryTable(1)
      }
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(selection) {
      const btns = this.dynamicButtons.filter(o => o.disabled !== undefined)
      if (btns.length > 0) {
        const isCheck = selection && selection.length > 0
        btns.forEach((item) => {
          item.disabled = !isCheck
        })
      }
    },

    hiddenColData(data) {
      if (data && data.length > 0) {
        this.refreshTableKey += 1
        this.dynamicTableCols = data
      }
    },

    // 新增
    add() {
      this.clickRowsData = {}
      this.popstate = 'add'
      this.showdia = true
    },

    // 编辑
    edit(index) {
      const rowData = this.$refs['multipleTable'].list[index]
      // rowData.carInfo = this.carInfoList[index]
      this.getSubData(rowData.insaleOrderId)
        .then(res => {
          rowData.carInfo = res
          this.clickRowsData = rowData
          this.popstate = 'edit'
          this.showdia = true
        }).catch(err => {
          console.log(err)
        })
    },
    // 打开编辑窗 获取子表数据
    getSubData(insaleOrderId) {
      return new Promise((resolve, reject) => {
        this.$requestAPI({
          apiUrl: api.orderApprovalQueryCar.APIUrl,
          variables: { insaleOrderId }
        }).then(response => {
          if (response.result === '1') {
            resolve(response.rows)
          }
        }).catch(err => {
          reject(err)
        })
      })
    },
    // selectRowsData(rowdata){
    //
    // },

    // 查看附件
    checkFile(index, type) {
      // location.href = process.env.VUE_APP_BASE_API + this.$refs['multipleTable'].list[index].downloadUrl
      window.open(this.$refs['multipleTable'].list[index][type])
    },

    // 删除按钮单条删除
    delOneData(row) {
      const data = [this.$refs['multipleTable'].list[row]]
      this.delData(data)
    },

    // 数据批量删除
    delSeleteData() {
      const data = this.$refs['multipleTable'].$refs['multipleTable'].selection
      this.delData(data)
    },

    // 删除
    delData(selectData) {
      const that = this
      this.$confirm('确定要删除吗', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const saveObjList = []
        selectData.forEach((item) => {
          saveObjList.push(item.releaseId)
        })
        const saveObj = {
          releaseId: saveObjList.join(),
          updateControlId: selectData[0].updateControlId
        }
        console.log(saveObj)
        that.$utils.apiRrequest(that, 'mutation', seApis.appDbReleaseMutationDelObject, saveObj, (data) => {
          if (data) {
            that.$message({
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            that.queryTable(1)
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

